<template>
  <div style="padding: 15px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="收货单号">
              <el-input v-model="form.code" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="所属仓库" prop="warehouseCode">
              <el-select v-model="form.warehouseCode" placeholder="请输入所属仓库  " style="width:75%" :disabled="true">
                <el-option
                  v-for="item in warehouseData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="入驻商" label-width="100px">
              <el-input v-model="form.shipmentName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <template v-if="this.form.type == 0">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item  label="订单类型">
                <el-select v-model="form.type" style="width:75%"  :disabled="true" >
                  <el-option value="0" label="采购入库"/>
                  <el-option value="1" label="退货入库"/>
                  <el-option value="2" label="盘盈入库"/>
                  <el-option value="3" label="调拨入库"/>
                  <el-option value="4" label="期初入库"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item  label="供应商" >
                <el-input v-model="form.supplierName" style="width:75%" :disabled="true" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item  label="计划到货日期" label-width="100px" >
                <el-input v-model="form.gmtPlanArrival" style="width:75%"  :disabled="true"/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </template>

      <template v-if="this.form.type == 1">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item  label="订单类型">
                <el-select v-model="form.type" style="width:75%"  :disabled="true" >
                  <el-option value="0" label="收货单"/>
                  <el-option value="1" label="退货单"/>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item  label="客户">
                <el-input v-model="form.customerName" style="width:75%"  :disabled="true"/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </template>
      <el-row>
        <el-col :span="19">
          <div class="grid-content bg-purple">
            <el-form-item  label="备注">
              <el-input v-model="form.remarks" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

    </el-form>


    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      :align="allAlign"
      :data="tableData"
      show-footer
      :footer-method="footerMethod"
      :span-method="objectSpanMethod"

      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="goodsName" title="商品名称"  width="270"></vxe-table-column>
      <vxe-table-column field="goodCode" title="商品编码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsBarCode" title="商品条码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsUnitName" title="单位"  width="270" ></vxe-table-column>
      <vxe-table-column field="planQuantity" title="计划数量"  width="120"></vxe-table-column>
      <vxe-table-column field="status" title="收货状态"  width="80" :formatter="formatterStatus"></vxe-table-column>
      <vxe-table-column field="receivedQuantity" title="收货数量"  width="120"></vxe-table-column>
      <vxe-table-column field="putawayQuantity" title="上架数量"  width="120"></vxe-table-column>
      <vxe-table-column field="inboundQuantity" title="入库数量"  width="120"></vxe-table-column>
      <vxe-table-column field="containerBarCode" title="容器号"  width="120" ></vxe-table-column>
      <vxe-table-column field="goodsStatusName" title="货品状态"  width="120" ></vxe-table-column>
      <vxe-table-column field="gmtManufacture" title="生产日期"  width="120"></vxe-table-column>
      <vxe-table-column field="gmtExpire" title="过期日期"  width="120"></vxe-table-column>
      <vxe-table-column field="receiveLot" title="收货批次"  width="120"></vxe-table-column>
      <vxe-table-column field="putawayCode" title="上架单号" width="120"></vxe-table-column>
      <vxe-table-column field="taskCode" title="任务号" width="120"></vxe-table-column>
      <vxe-table-column field="operatorName" title="作业人" width="120"></vxe-table-column>
      <vxe-table-column field="remarks" title="备注"  width="270"></vxe-table-column>
    </vxe-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>

  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
import request from '@/utils/request'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'
import { validatePhone, validateIDNumber } from "@/utils/validate.js";
import goodsSelect from '@/views/components/goodsElSelect.vue'
import {getWarehouse} from '@/api/basicInfo'
import { goodsUnitConversion, receiveCheckSubmit ,receiveSaveSubmit} from '@/api/inStorage'
import shipmentSelect from '@/views/components/shipmentSelect.vue'
import {  receiveDetail, receivePrintDetail} from '@/api/inStorage'

Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
VXETable.use(VXETablePluginElement)
export default {
  name: 'Parent',
  components: {
    goodsSelect,
    shipmentSelect
  },
  data() {
    return {
      allAlign:'center',
      warehouseData:[],
      isShow0:false,
      isShow1:false,
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0      ,
      units:[],
      isDisable:false,   //确定键显示按钮
      form: {
        shipmentCode: '',
        type:'',
        warehouseCode:"",
        sourceCode:'',
        supplierCode:'',
        remarks: '', // 备注
        gmtPlanArrival: '',
        receiveItemList: []
      },
      loading: false,
      tableData: [
      ],
      rules: {
        shipmentCode: [
          { required: true, message: '请输入客户姓名', trigger: 'change' }
        ],
        warehouseCode: [
          { required: true, message: '请选择仓库', trigger: 'change' }
        ],
        supplierCode: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ],

      },
      validRules: {
        goodsName: [
          { required: true, message: '商品名称必须填写' },
        ],
        goodsUnit: [
          { required: true, message: '单位必须填写' },
        ],
        planQuantity: [
          { required: true, message: '数量必须填写' },
        ],
      },
      listQuery: {
        page: 1,
        limit: 13,
        totalzong: 0
      },
    }
  },
  created() {
    this.getWarehouse()
  },
  methods: {
    // 获取页面信息
    getInfo() {
      this.loading = true
      let code = this.$route.query.code ? this.$route.query.code : "";
      receivePrintDetail(code).then(response => {
        this.form = response.data
        this.tableData = this.form.receiveItemWithRegisterVOList
        this.spanArr = [];
        this.contentSpanArr = [];
        for (var i = 0; i < this.tableData.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0;
            this.contentSpanArr.push(1);
            this.position = 0;
          } else {
            // 判断当前元素与上一个元素是否相同(第1和第2列)
            if (this.tableData[i].goodCode == this.tableData[i - 1].goodCode &&
                this.tableData[i].goodsName == this.tableData[i - 1].goodsName &&
                this.tableData[i].goodsBarCode == this.tableData[i - 1].goodsBarCode &&
                this.tableData[i].goodsUnitName == this.tableData[i - 1].goodsUnitName &&
                this.tableData[i].planQuantity == this.tableData[i - 1].planQuantity
                ) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }

            }
          }
        this.loading = false
      })
    },
    // 表格合并行
    objectSpanMethod({ row, rowIndex,column,  columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

    //仓库查询
    getWarehouse(){
      getWarehouse().then(response => {
        this.warehouseData = response.data
      })
      this.getInfo()
    },
    // 返回
    funcSubmitCheck() {
      this.$eventBus.$emit('refreshList')
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        path: "/inbound/reciveList"
      });
    },

    footerMethod ({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 1) {
            return '合计'
          }
          if (['receivedQuantity'].includes(column.property)) {
            return XEUtils.sum(data, column.property)
          }
          if (['planQuantity'].includes(column.property)) {
            return this.form.totalQuantity
          }
          if ([ 'putawayQuantity', 'inboundQuantity'].includes(column.property)) {
            return this.form[column.property];
          }
          return '-'
        })
      ]
    },
    formatterStatus({cellValue, row}) {
      if (cellValue == '1') {
        return '已收货';
      }
    },
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 150px auto;
    width: 175px;
    // float: right;
  }
  </style>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
 padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
